<template>
    <div class="">
        <div class="todo-item" :class="{'todo-item-hover': !item.isEdit}" v-for="(item,index) in todoList" :key="index" @dblclick="dblClickFun(item)">
            <input type="checkbox" v-model="item.check">
            <div class="todo-text">
                <input type="text" class="todoAdd" v-focus v-if="item.isEdit" @blur="inputBlue(item)" v-model="item.value" />
                <span v-else :class="{'del':item.check}">{{item.value}}</span>
            </div>
            <div class="del-box" @click="delItem(index)">X</div>
        </div>
    </div>
</template>

<script>
    export default {
        //子组件不能直接修改父组件的所传参数
        props:{
            tlist:Array
        },
        data() {
            return {
                // list:[]
                todoList:[]
            }
        },
        emits:['setTodoList'],
        methods: {
            //删除某一项
            delItem(index) {
                // 安全的做法
                let tmp_todolist = [...this.todoList] //深拷贝
                tmp_todolist.splice(index, 1)
                this.todoList = [...tmp_todolist]
                //把数据传入父组件
                this.$emit('setTodoList',this.todoList)
            },
            // 双击事件
            dblClickFun(item) {
                item.isEdit = true
            },
            //失去焦点
            inputBlue(item){
                item.isEdit = false
                this.$emit('setTodoList',this.todoList)
            }
        },
        watch:{
            //安全操作，避免直接修改父组件数据
            tlist:{
                handler(val){
                    if(val){
                        this.todoList = val
                    }
                },
                deep:true
            }
        },
        //自定义指令实现聚焦
        directives: {
            'focus': {
                mounted(el) {
                    setTimeout(()=>{
                        el.focus()
                    },0)
                }
            }
        }
    }
</script>


<style lang="scss" scoped>
    @import url("./index.scss");
    .content {
        width: 600px;
        min-height: 400px;
        border-radius: 20px;
        background: #fff;
        margin: 0 auto;
        padding: 20px;
        box-sizing: border-box;
    
        .todoAdd {
            width: 100%;
            height: 40px;
            font-size: 20px;
        }
    
        .todo-item {
            height: 40px;
            margin-top: 10px;
            font-size: 24px;
            display: flex;
            align-items: center;
            border-radius: 10px;
            transition: all 0.7s;
    
            .todo-text {
                width: 100%;
                .del {
                    text-decoration: line-through;
                }
            }
    
            .del-box {
                width: 20px;
                height: 20px;
                border-radius: 50%;
                text-align: center;
                line-height: 20px;
                font-size: 14px;
                color: #fff;
                background: rgba(0, 0, 0, .5);
                display: none;
                cursor: pointer;
            }
        }
    
        .todo-item:hover {
            background: rgba(0, 0, 0, 0.1);
    
            .del-box {
                display: block;
            }
        }
    }
</style>
